<template>
	<view class="u-padding-20">
		<view class="u-rela setlist" @click="show=true">
			<text class="u-abso pos_left">修改密码</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" name="arrow-right" size="35rpx"></u-icon>
		</view>
		<!-- <view class="u-rela setlist">
			<text class="u-abso pos_left">清除缓存</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" name="arrow-right" size="35rpx"></u-icon> -->
		<!-- </view> -->
		<view class="u-rela setlist" @click="showmodal=true">
			<text class="u-abso pos_left">退出登录</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" name="arrow-right" size="35rpx"></u-icon>
		</view>
		<view class="tips">
			<u-icon name="error" size="25rpx"></u-icon>
			<text>此操作不可逆，请慎重操作！</text>
		</view>
		<u-mask :show="show">
			<view class="warp">
				<view class="rect u-padding-20">
					<view class="u-text-center u-font-35 u-margin-bottom-20">修改密码</view>
					<view class="pas_con">
						<text class="va_m u-margin-right-20">原密码</text>
						<input class="va_m" v-model="oldpas" type="text" placeholder="请输入原密码">
					</view>
					<view class="pas_con">
						<text class="va_m u-margin-right-20">新密码</text>
						<input class="va_m" v-model="newpas" type="text" placeholder="请输入新密码">
					</view>
					<view class="pas_con">
						<text class="va_m u-margin-right-20">确认密码</text>
						<input class="va_m" v-model="surepas" type="text" placeholder="请确认新密码">
					</view>
					<view class="u-text-right u-margin-top-20">
						<u-button class="sure_set u-margin-right-20" size="mini" shape="square" @click="submit">保存</u-button>
						<!-- <u-button class="new_set u-margin-right-20" size="mini" shape="square">重置</u-button> -->
						<u-button size="mini" shape="square" @click="show=false">取消</u-button>
					</view>
				</view>
			</view>
		</u-mask>
		<u-modal v-model="showmodal" :title="title" :content='content' :showCancelButton="true" :closeOnClickOverlay="true" confirmColor="#008987" @close="showmodal=false" @cancel="showmodal=false" @confirm="loginOut"></u-modal>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		changePass
	} from '@/service/loginService.js';
	import cookie from '@/util/store/cookie.js';
	export default {
		data () {
			return {
				show: false,
				oldpas:'',
				newpas:'',
				surepas:'',
				
				showmodal:false,
				title:'温馨提示',
				content:'您确定要退出该账号的登录状态吗？'
			}
		},
		methods:{
			submit:function(){
				if (this.oldpas == '' || this.newpas == '' || this.surepas == ''){
					this.$refs.uToast.show({
						title: '密码不能为空！',
						type: 'error', 
						icon: false
					})
				}else if(this.newpas != this.surepas){
					this.$refs.uToast.show({
						title: '两次输入密码不一致！',
						type: 'warning', 
						icon: false
					})
				}else{
					changePass({
						password: this.oldpas,
						new_password: this.newpas
					}).then(res=>{
						if(res.code==200){
							this.show=false,
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success', 
								icon: false
							})
						}else{
							this.$refs.uToast.show({
								title: res.msg,
								type: 'warning', 
								icon: false
							})
						}
					})
				}
				
			},
			loginOut:function(){
				cookie.remove('token');
				cookie.remove('sid');
				uni.clearStorageSync('lifeData');
				
				this.$refs.uToast.show({
					title: '已退出登录状态',
					type: 'success', 
					icon: false
				})
				setTimeout(function(){
					uni.reLaunch({
						url:'../login/login'
					})
				},2000)
				
			}
		}
	}
</script>

<style lang="scss">
.setlist{
	height:120rpx;
	line-height: 120rpx;
	border-bottom: 1rpx solid #ddd;
}
.tips{
	font-size: 25rpx;
	color:#006971;
	padding:20rpx 0;
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 80%;
	box-shadow: 0 0 20rpx #aaa;
	font-size: 28rpx;
	border-radius: 10rpx;
	background-color: #fff;
}
.rect input{
	display: inline-block;
	width:65%;
	height:50rpx;
	font-size: 28rpx;
	text-align: left;
	padding:0 10rpx;
	border-radius: 10rpx;
	border:1rpx solid #ddd;
}
.pas_con{
	padding:20rpx 0;
	text-align: center;
}
.pas_con text{
	display: inline-block;
	width:25%;
}
.sure_set,.sure_set button{
	color:#fff !important;
	background-color: #007AFF !important;
}
.new_set,.new_set button{
	color:#fff !important;
	background-color: #55aaff !important;
}
</style>
